<!-- 供应商账户列表 -->
<template>
  <div class="base-info">
    <div>
      <a-button type="primary" @click="AddAcount">新增收款账户</a-button>
    </div>
    <a-space style="margin-top: 10px" direction="vertical" fill>
      <div v-for="(item, key, index) in AccountData" :key="index">
        <div v-if="index === 0">
          <a-space direction="vertical" fill>
            <div class="table-item">
              <div class="Account_item" v-if="index === 0">
                <a-space style="padding: 25px">
                  <div
                    style="
                      width: 4px;
                      height: 18px;
                      background: inherit;
                      background-color: rgba(61, 126, 255, 1);
                      border: none;
                      border-radius: 1px;
                    "
                  ></div>
                  <div>对私账号</div>
                </a-space>
              </div>
              <div>
                <a-table
                  :pagination="false"
                  style="background-color: white"
                  :columns="columns"
                  :data="item"
                >
                  <template #key="{ rowIndex }"> {{ rowIndex + 1 }}</template>
                  <template #accountType="{ record }">
                    {{ record.isPrimary === 1 ? '是' : '否' }}</template
                  >
                  <template #handle="{ record }"
                    ><a-button
                      type="text"
                      status="danger"
                      @click="deleteAccount(record.id)"
                      >删除</a-button
                    >
                  </template>
                </a-table>
              </div>
            </div>
          </a-space>
        </div>

        <div v-if="index === 1" class="table-item">
          <a-space direction="vertical" fill>
            <div>
              <div class="Account_item">
                <a-space style="padding: 25px">
                  <div
                    style="
                      width: 4px;
                      height: 18px;
                      background: inherit;
                      background-color: rgba(61, 126, 255, 1);
                      border: none;
                      border-radius: 1px;
                    "
                  ></div>
                  <div>对公账号</div>
                </a-space>
              </div>
              <div>
                <a-table :pagination="false" :columns="columns" :data="item">
                  <template #key="{ rowIndex }"> {{ rowIndex + 1 }}</template>
                  <template #accountType="{ record }">
                    {{ record.isPrimary === 1 ? '是' : '否' }}</template
                  >
                  <template #handle="{ record }"
                    ><a-button
                      type="text"
                      status="danger"
                      @click="deleteAccount(record.id)"
                      >删除</a-button
                    >
                  </template>
                </a-table>
              </div>
            </div>
          </a-space>
        </div>
        <div v-if="index === 2" class="table-item">
          <a-space direction="vertical" fill>
            <div>
              <div class="Account_item">
                <a-space style="padding: 25px">
                  <div
                    style="
                      width: 4px;
                      height: 18px;
                      background: inherit;
                      background-color: rgba(61, 126, 255, 1),
                      border: none;
                      border-radius: 1px;
                    "
                  ></div>
                  <div>微信</div>
                </a-space>
              </div>
              <div>
                <a-table :pagination="false" :columns="columns" :data="item">
                  <template #key="{ rowIndex }"> {{ rowIndex + 1 }}</template>
                  <template #accountType="{ record }">
                    {{ record.isPrimary === 1 ? '是' : '否' }}</template
                  >
                  <template #handle="{ record }"
                    ><a-button
                      type="text"
                      status="danger"
                      @click="deleteAccount(record.id)"
                      >删除</a-button
                    >
                  </template>
                </a-table>
              </div>
            </div>
          </a-space>
        </div>
        <div v-if="index === 3" class="table-item">
          <a-space direction="vertical" fill>
            <div>
              <div class="Account_item">
                <a-space style="padding: 25px">
                  <div
                    style="
                      width: 4px;
                      height: 18px;
                      background: inherit;
                      background-color: rgba(61, 126, 255, 1);
                      border: none;
                      border-radius: 1px;
                    "
                  ></div>
                  <div>支付宝</div>
                </a-space>
              </div>
              <div>
                <a-table :pagination="false" :columns="columns" :data="item">
                  <template #key="{ rowIndex }"> {{ rowIndex + 1 }}</template>
                  <template #accountType="{ record }">
                    {{ record.isPrimary === 1 ? '是' : '否' }}</template
                  >
                  <template #handle="{ record }"
                    ><a-button
                      type="text"
                      status="danger"
                      @click="deleteAccount(record.id)"
                      >删除</a-button
                    >
                  </template>
                </a-table>
              </div>
            </div>
          </a-space>
        </div>
      </div>
    </a-space>
    <Addacount
      v-model:visible="modalVisible"
      @addAccountEmit="addAccount"
    ></Addacount>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import {
    GetArchivesDetaliType,
    postSupplierAccount,
    delSupplierAccount,
  } from '@/api/buy-management/archives-details/index';
  import Addacount from './add-account/index.vue';

  const route = useRoute();

  const AccountData = ref([]);
  const modalVisible = ref(false);
  const getSupplieraccount = async () => {
    const res = await GetArchivesDetaliType({
      id: Number(route.query.id),
      typeId: 3,
    });
    AccountData.value = res;
  };
  getSupplieraccount();

  const columns = [
    { title: '序号', slotName: 'key' },
    { title: '户名', dataIndex: 'name' },
    { title: '账号', dataIndex: 'account' },
    { title: '开户行', dataIndex: 'bankOfDeposit' },
    { title: '开户省市', dataIndex: 'bankOfProvince' },
    { title: '分支行', dataIndex: 'bankOfProvince' },
    { title: '是否为首要账户', slotName: 'accountType' },
    { title: '操作', slotName: 'handle' },
  ];

  const AddAcount = () => {
    modalVisible.value = true;
  };

  const addAccount = async (form) => {
    form.accountType = Number(form.accountType);
    await postSupplierAccount({
      supplierId: Number(route.query.id),
      ...form,
    });
    getSupplieraccount();
  };

  const deleteAccount = async (id) => {
    const res = await delSupplierAccount({ id });
    getSupplieraccount();
  };
</script>

<style scoped lang="less">
  .base-info {
    padding: 0 40px;
  }

  .Account_item {
    height: 60px;
    background-color: rgba(245, 247, 250, 1);
    line-height: 60px;
    display: flex;
  }
  .table-item {
    margin-top: 30px;
  }
</style>
